<!-- 轮播图Start -->
<div id="slide" class="slide">
  <ul class="slide-image">
    <tag:productSlide id="vo">
      <li><a href="{$vo.url}"><img src="{$vo.img}"></a></li>
    </tag:productSlide>
  </ul>
</div>
<script type="text/javascript">
  GH.load("js", "js-slide", "__COMMON__/js/slide.1.0.js", function(){
    utuoSlide("slide");
  });
</script>
<!-- 轮播图End -->

<!-- 产品列表 Start -->
<section class="product-block product-list clearfix mt10 pl10 pr10">
  <a href="#"><h4>{$category.name}</h4></a>
  <ul id="product-goods-list">
    <tag:productGoods id="vo" order="create_time desc" limit="10">
    <li class="mb8">
      <a href="{$vo.url}">
        <p class="preview"><img src="{$vo.thumb_img}"></p>
        <p class="title mt5">{$vo.name}</p>
        <p class="price"><span>￥{$vo.price}</span><notempty name="vo.price_high"><del>{$vo.price_high}</del></notempty></p>
	      <p class="title">销量：{$vo['saled_count']+$vo['saled_base']}</p>
      </a>
    </li>
    </tag:productGoods>
  </ul>
  <button id="read-more" class="btn btn-orange w100" style=" background: {$style.bottom_bg}; color: {$style.bottom_color};">加载更多</button>
</section>
<!-- 产品列表 End -->

<script type="text/javascript">
  (function(){
    var readMoreBtn = document.getElementById ( "read-more" ),
        productGoodsList = document.getElementById ( "product-goods-list" ),
        page = 1,
        id = {$_GET['id']},
        sid = {$sid};
    readMoreBtn.addEventListener ( "touchend", fnReadMore, false );

    function fnReadMore () {

      readMoreBtn.innerHTML = "加载中……";
      readMoreBtn.classList.add ( "disabled" );
      readMoreBtn.removeEventListener ( "touchend", fnReadMore, false );

      GH.ajax ( "__CONTROLLER__/more", {"p": ++page, "id": id, "sid": sid}, function(data){
        fnShowMore(data);
        if ( data.extra.length == 0 ) {
          readMoreBtn.innerHTML = "已经没有更多了~";
        } else {
          readMoreBtn.innerHTML = "加载更多";
          readMoreBtn.classList.move ( "disabled" );
          readMoreBtn.addEventListener ( "touchend", fnReadMore, false );
        }
      }, "post" );

    };
    function fnShowMore ( data ) {
      var html = "";
      for ( var i=0; item=data.extra[i]; i++ ) {
        html += "<li class='mb8'><a href='"+ item.url +"'>"
               +"<p class='preview'><img src='"+ item.pic +"'></p>"
               +"<p class='title mt5'>"+ item.name +"</p>"
               +"<p class='price'><span>￥"+ item.price +"</span><del>"+ item.price_high +"</del></p>"
               +"</a></li>"
      };
      productGoodsList.insertAdjacentHTML ( "beforeend", html );
    };
  })();
</script>
